<template>
    <div class="page-wrap">
        <div>
            <BaseInfo :lubiaoDetail="detailData" />
            <div style="margin-top: 2px">
                <MainContent :lubiaoDetail="detailData" :disabled="disabled" @success="getDetailData" />
            </div>
            <div style="margin-top: 2px; padding: 24px 0; background: #fff">
                <ApprovalProcess :lubiaoDetail="detailData" :disabled="disabled" :hasAuth="hasAuth" @success="getDetailData" v-if="detailData.id" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import api from '@/api';
import { message } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import BaseInfo from './components/BaseInfo/index.vue';
import MainContent from './components/MainContent/index.vue';
import ApprovalProcess from './components/ApprovalProcess/index.vue';
import { defineComponent, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    components: {
        BaseInfo,
        MainContent,
        ApprovalProcess
    },
    setup() {
        const route = useRoute();
        const state = reactive<any>({
            detailData: {},
            hasAuth: false
        });
        const disabled = computed(() => {
            return +state.detailData.stage > 2 || !state.hasAuth;
        });
        const getDetailData = async () => {
            store.commit('app/SET_GLOBALLOADING', true);
            const query = {
                id: route.query.id
            };
            const { success, moule, errorMsg } = await api.signpostModel.findById(query);
            if (success) {
                state.detailData = { ...moule };
                state.hasAuth = state.detailData.productManagers.indexOf(store.getters.userInfo.employeeDTO.name) >= 0;
            } else {
                message.error(errorMsg);
            }
            store.commit('app/SET_GLOBALLOADING', false);
            return success;
        };
        const init = async () => {
            state.detailData = {};
            getDetailData();
        };
        useMountedAndActivated(init);
        return {
            ...toRefs(state),
            disabled,
            getDetailData
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    ::v-deep(.section-wrap) {
        padding: 0;
    }
}
</style>